<template>
  <div>
      <Button type="success" @click="addEquipment" :disabled="equipmentadd">添加器材</Button>
      <Input suffix="ios-search" placeholder="Enter text" style="width: auto" 
        v-model="searchKey"
        @on-enter="search"/>
  
      <Table border ref="table" :columns="columns" :data="tableData">
        <template slot-scope="{ index }" slot="index">
            {{index + 1}}
        </template>
        <template slot-scope="{ row }" slot="status">
            <i-switch v-model="row.status" :disabled="true"></i-switch>  
        </template>

        <template slot-scope="{ row }" slot="image">
              <!-- row.icon是图片的地址 -->
              <img class="equipmentImg" :src="row.icon" v-viewer>
        </template>
        <template slot-scope="{ row }" slot="createTime">
            {{row.createTime | moment}}
        </template>
        <template slot-scope="{ row }" slot="updateTime">
            {{row.updateTime | moment}}
        </template>
        <template slot-scope="{ row }" slot="url">
          <a :href="row.url">{{row.url}}</a>
        </template>
        <template slot-scope="{ row, index }" slot="action">
            <Button type="primary" size="small" style="margin-right: 5px" 
              :disabled="equipmentedit"
              @click="editEquipment(row)">编辑</Button>
            <Button type="error" size="small" 
              :disabled="equipmentdel"
              @click="remove(row)">删除</Button>
        </template>
      </Table>

      <!-- 分页 -->
      <Page :total="total" :page-size="params.limit" @on-change="changPage" v-if="update"></Page>

      <!-- 删除器材对话框 -->
      <Modal v-model="showDelete" @on-cancel="cancel">
        <p slot="header" style="color:#f60;text-align:center">
            <Icon type="ios-information-circle"></Icon>
            <span>Delete {{curquipment.equipmentName}}</span>
        </p>
        <div style="text-align:center">
            <p>该删除操作无法撤销</p>
            <p>确定删除？</p>
        </div>
        <div slot="footer">
            <Button type="error" size="large" long :loading="modal_loading" @click="delEquipment">Delete</Button>
        </div>
      </Modal>
  </div>
</template>

<script>
import Viewer from 'v-viewer'
export default {
  data(){
    return{
      columns: [
        {
            title: '#',
            slot:'index',
            width:'60px',
            align: 'center'
        },
        // {
        //     title: 'ID',
        //     key: 'equipmentId',
        //     align: 'center'
        // },
        {
            title: '器材名称',
            key: 'equipmentName',
            align: 'center'
        },
        {
            title: '器材图标',
            key: 'icon',
            slot: 'image',
            align: 'center'
        },
        {
            title: '购买链接',
            key: 'url',
            slot:'url',
            align: 'center'
        },
        {
            title: '器材规格',
            key: 'specification',
            align: 'center'
        },
        {
            title: '器材类型',
            key: 'type',
            align: 'center'
        },
        {
            title: '器材状态',
            key: 'status',
            align: 'center',
            slot:'status'
        },
        {
            title: '创建时间',
            key: 'createTime',
            slot: 'createTime',
            align: 'center'
        },
        {
            title: '更新时间',
            key: 'updateTime',
            slot: 'updateTime',
            align: 'center'
        },
        {
            title: '操作',
            slot:'action',
            align: 'center'
        }
      ],
      //分页配置
      update:true,
      params:{
        page:1,
        limit:10,
        key:''
      },
      total:0,
      searchKey:'',
      tableData: [],
      //设置删除
      showDelete:false,
      modal_loading: false,
      curquipment:{},
      //用户权限
      equipmentadd:true,
      equipmentedit:true,
      equipmentdel:true      
    }
  },
  created(){
    this.getEquipmentList(this.params)
    //判断权限
    let temp = JSON.parse(window.sessionStorage.getItem('authorities'))
    for(let i = 0; i < temp.length; i++){
      temp[i] = JSON.parse(temp[i])
    }
    for(let i = 0; i < temp.length; i++){
      if(temp[i].authority == 'equipment:add'){
        this.equipmentadd = false
      }
      if(temp[i].authority == 'equipment:edit'){
        this.equipmentedit = false
      }
      if(temp[i].authority == 'equipment:del'){
        this.equipmentdel = false
      }
    }   
  },
  methods:{
    //点击标签放大预览
    viewer(){
    //  this.$nextTick(() => {
    //   let views = document.querySelectorAll('img')
    //   console.log('1')
    //   console.log(views)
    //   for(let item of views){
    //     console.log(item)
    //     new Viewer([item])      
    //   }
    // })     
    },
    //获取表格数据
    async getEquipmentList(params){
      const {data:res} = await this.$axios.get('/equipment/list',{
        params:this.params
      })
      // console.log(res)
      if(res.status != 200){
        return
      }
      this.tableData = res.page.list
      this.total = res.page.totalCount
      this.viewer()
    },
    // 分页页数改变
    changPage(page){
      // console.log(page)
      this.params.page = page
      this.getEquipmentList(this.params)
    },
    search(){
      this.params.key = this.searchKey.trim()
      this.getEquipmentList(this.params)
    },
    change (status) {
      this.$Message.info('开关状态：' + status);
    },
    // 添加器材
    addEquipment(){
      this.$router.push('/admin/addequipment')
    },
    editEquipment(row){
      this.$router.push({
        path:'/admin/editEquipment',
        query:{
          equipmentmsg:row
        }
      })
    },
    //删除该器材
    remove(row){
      this.curquipment = row   
      this.showDelete = true   
    },
    async delEquipment(){
      this.modal_loading = true
      const {data: res} = await this.$axios.post('/equipment/delete/' + this.curquipment.equipmentId)
      //重新获取数据
      this.params.page = 1
      this.getEquipmentList(this.params) 
	    // 移除组件(组件强制刷新)
	    this.update = false
	    // 在组件移除后，重新渲染组件
	    // this.$nextTick可实现在DOM 状态更新后，执行传入的方法。
	    this.$nextTick(() => {
	        this.update = true
	    })  
      this.$Message.info(res.msg)
      this.modal_loading = false
      this.showDelete = false
      this.curquipment = {}
    },
    cancel(){
      this.curquipment = {}
    }
  }
}
</script>

<style scoped>
  .ivu-btn-success{
    margin:1vh 1vw;
  }
  .equipmentImg{
    width:50px;
    height:50px;
    cursor:pointer;
  }
  .ivu-page{
    margin-top:20px;
    text-align:center
  }
</style>